<template>
	<view class="">
		<!-- <view><van-nav-bar title="服务新增" left-arrow @click-left="leftBtn"></van-nav-bar></view>
		<view class="service_new-line"></view>
 -->
		<!-- 服务详情 -->
		<view class="service-box">
			<!-- 服务品类 -->
			<view class="boxsClass">
				<view class="name">服务品类</view>
				<view class="text">
					<picker mode="selector" :range="option" @change="serve_pinlei">
						<view>{{ option[op_value] + '>' }}</view>
					</picker>
				</view>
				<view class="name">服务细分</view>
				<view class="text">
					<picker mode="selector" :range="option1" @change="serve_xifen">
						<view>{{ option1[op_value1] + '>' }}</view>
					</picker>
				</view>
			</view>

			<view></view>
			<!-- 服务包含 -->
			<view class="services">
				<view class="service-left">
					<text>服务包含</text>
					<view style="display: inline-block;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #989898;margin-left: 52rpx;">
						<picker mode="selector" :range="array" :value="index" @change="bindPickerChange">
							<view>{{ array[index] }}</view>
						</picker>
					</view>
				</view>
				<image src="/static/images/jiantou.png"></image>
			</view>

			<!-- 服务名称 -->
			<view class="services">
				<view class="service-left">
					<text>服务名称</text>
					<view style="display: inline-block ;transform: translate(48rpx, 10rpx);"><input type="text" v-model="serviceName" placeholder="自定义服务器名称" /></view>
				</view>
			</view>

			<!-- 服务图片 -->
			<view class="service-img">
					<u-upload action="http://192.168.5.115:8080/ServiceAll/addPhoto" :file-list="fileList" :header="header" :form-data="formData" :beforeUpload="beforeUpload"></u-upload>
				</view>
		</view>

		<view class="service_new-line"></view>

		<!-- 一口价 -->
		<view class="priceOne-box">
			<!-- <view style="width: 226rpx;	margin: 39rpx 0 60rpx 0; border: 1px solid #000000;">
				<xfl-select
					:list="list"
					:clearable="false"
					:showItemNum="5"
					:listShow="false"
					:isCanInput="true"
					:style_Container="'height: 55rpx; font-size: 32rpx;	text-align: center;'"
					:initValue="'一口价'"
					:selectHideType="'hideAll'"
				></xfl-select>
			</view> -->

			<!-- 门店价格 -->
			<view class="store-price">
				<view class="price-left">
					<text>门店价格</text>
					<view style="display: inline-block ;transform: translate(48rpx, 10rpx);">
						<input type="text" v-model="StorePrice " placeholder="门店价格/元" class="input_infor" />
					</view>
				</view>
				<!-- <view style="width: 4px;height: 30px;background: #282828;"></view>
				<view class="price-left">
					<text>预约价格</text>
					<text>**元</text>
				</view> -->
			</view>

			<!-- 预约价格 -->
			<view class="service-way">
				<view class="service-way-item">
					<text>预约价格</text>
					<view style="display: inline-block ;transform: translate(48rpx, 10rpx);">
						<input type="text" v-model="ReservationPrice " placeholder="预约价格/元" class="input_infor" />
					</view>
				</view>
			</view>

			<!-- 会员价格 -->
			<view class="service-way">
				<view class="service-way-item">
					<text>会员价格</text>
					<view style="display: inline-block ;transform: translate(48rpx, 10rpx);">
						<input type="text" v-model="vipPrice " placeholder="会员价格/元" class="input_infor" />
					</view>
				</view>
			</view>
		</view>

		<view class="service_new-line"></view>

		<!-- 分销服务 -->
		<view class="boxs">
			<view class="Distribution_Service">
				<view class="name"><text>分销服务</text></view>
				<switch :checked="storeDistribution" @change="onchange1" color="#00C6C2" style="transform: scale(0.8);" />
			</view>
		</view>

		<!-- 分销佣金 -->
		<view class="service-details">
			<view class="service-way">
				<view class="service-way-item">
					<text>分销佣金</text>
					<view style="display: inline-block ;transform: translate(48rpx, 10rpx);">
						<input type="text" v-model="storeDistributionPrice" placeholder="**元" class="input_infor" />
					</view>
				</view>
				<image src="/static/images/jiantou.png"></image>
			</view>
		</view>

		<view class="service_new-line"></view>
		<!-- 服务详情 -->
		<view class="service-details">
			<!-- 服务详情 -->
			<view class="service-way">
				<view class="service-way-item">
					<text>服务详情</text>
					<view style="display: inline-block ;transform: translate(48rpx, 10rpx);">
						<input type="text" v-model="serviceDetails" placeholder="服务详情" class="input_infor" />
					</view>
				</view>
				<image src="/static/images/jiantou.png"></image>
			</view>

			<!-- 服务事项 -->
			<view class="service-way">
				<view class="service-way-item">
					<text>服务事项</text>
					<view style="display: inline-block ;transform: translate(48rpx, 10rpx);">
						<input type="text" v-model="serviceNote" placeholder="服务事项" class="input_infor" />
					</view>
				</view>
				<image src="/static/images/jiantou.png"></image>
			</view>

			<!-- 服务方式 -->
			<view class="service-way">
				<view class="service-way-item">
					<text>服务方式</text>
					<view style="display: inline-block;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #989898;margin-left: 52rpx;">
						<picker mode="selector" :range="array1" :value="index1" @change="bindPickerChange1">
							<view>{{ array1[index1] }}</view>
						</picker>
					</view>
				</view>
				<image src="/static/images/jiantou.png"></image>
			</view>
			<!-- 服务时间 -->
			<view class="service-way">
				<view class="service-way-item">
					<text>服务时间</text>
					<view style="display: inline-block;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #989898;margin-left: 52rpx;">
						<picker mode="selector" :range="array2" :value="index2" @change="bindPickerChange2">
							<view>{{ '预计' + array2[index2] + '小时' }}</view>
						</picker>
					</view>
				</view>
				<image src="/static/images/jiantou.png"></image>
			</view>

			<!-- 七天承诺 -->
			<view class="service-way" style="border-bottom: none;">
				<view class="service-way-item">
					<text>七天服务承诺</text>
					<text>七天不满意免费重做</text>
				</view>
				<switch :checked="servicePromise" @change="onchange" color="#00C6C2" style="transform: scale(0.8);" />
			</view>
		</view>

		<view class="service_new-line"></view>

		<!-- 按钮 -->
		<view class="tag-btn">
			<view class="service-button">
				<button @click="onPrevious" class="service-button-1"><text>上架销售</text></button>
				<button class="service-button-2" @click="onNext" hover-class="background:#8cc6c4"><text>放入仓库</text></button>
			</view>
		</view>
	</view>
</template>
  
<script>
import xflSelect from '../../components/xfl-select/xfl-select.vue';
import { getServiceInfo, addPhoto, onSale ,addWarehouse} from '@/api/index.js';
// import client from '@/utils/unpload.js'
 
         
        
export default {
	data() {
		return {
			value: 0,
			op_value1: 0,
			op_value: 0,
			array: ['检测+洗发+按摩+修剪', '烫发', '染发', '头发护理', '头皮护理', '治疗+造型'],
			option: ['美发', '美容', '美妆', '美甲', '美体'],
			option1: ['洗吹', '造型', '洗剪吹', '烫发', '染发', '头发护理', '头皮护理', '接发', '其他'],
			id: " ",
			index: 0,
			index1: 0,
			index2: 2,
			fileList: [],
			array1: ['上门服务', '门店服务'],
			array2: ['1', '2', '3', '4', '5'],
			obj: {},
			vipPrice: '', //会员价格
			StorePrice: '', //门店价格
			ReservationPrice: '', //预约价格
			serviceDetails: '服务详情', //服务详情
			serviceNote: '服务注意事项', //服务注意事项
			serviceTime: '', //服务时间
			serviceName: 'xxx', //服务名称
			storeDistribution: 0, //分销佣金状态0关闭1打开
			storeDistributionPrice: '', //分销佣金价格
			servicePromise: 0, //7天状态
			userId: '',
			shopId: '',
			formData:{
			
				
			},
			header:{
				token:''
			}
		};
	},
	components: {
		// 下拉组件注册
		xflSelect
	},
	methods: {
		leftBtn() {
			console.log('123>>>>>>>>>>');
		},
		// 7天状态的切换
		onchange(e) {
			this.servicePromise = e.detail.value == false ? 0 : 1;
		},
		//分销状态切换
		onchange1(e) {
			this.storeDistribution = e.detail.value == false ? 0 : 1;
		},
		//服务包含
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		//服务方式
		bindPickerChange1: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index1 = e.target.value;
		},
		//服务时间
		bindPickerChange2: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index2 = e.target.value;
		},
		//服务品类
		serve_pinlei(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.op_value = e.target.value;
		},
		// 服务细分
		serve_xifen(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.op_value1 = e.target.value;
		},
		//图片上传
		beforeUpload(index,list){
			console.log(list)
			this.formData.url = list[0].url
			
	},
	//雪花id
	checkedId(str){
		var _str = str
			for(var i = true; i == true;){
				var i = /[:][0-9]{18,}[,]?/.test(_str) 
				if(i == true){
				var handlestr = /[:][0-9]{18,}[,]?/.exec(_str)
				var handlestr2 = /[0-9]{18,}/.exec(handlestr[0])
				_str = _str.replace(handlestr[0], ':"'+handlestr2[0]+'",')
				}
			}
			_str = _str.replace(/[,][}]/g,'}')
			return JSON.parse(_str)
	},
		//根据id查询返回信息
		getEideInfor(id) {
			uni.showToast({
				icon: 'loading',
				duration: 9999
			});
			let that = this;

			getServiceInfo(id)
				.then(res => {
					if (res) {
						uni.hideToast();
					}
					// console.log('我是根据id查询回来的信息', res);
					
					let result= that.checkedId(res[1].data)
					that.obj = result.data
					console.log(that.obj);
					that.vipPrice = that.obj.storeVipPrice;
					that.StorePrice = that.obj.storePrice;
					that.ReservationPrice = that.obj.storeAboutPrice;
					that.serviceDetails = that.obj.serviceDetails;
					that.serviceNote = that.obj.serviceNote;
					that.serviceName = that.obj.serviceName;
					that.index1 = that.obj.serviceMode;
					that.userId = that.obj.userId;
					that.shopId = that.obj.shopId;
					that.storeDistributionPrice = that.obj.storeDistributionPrice;
					that.storeDistribution = that.obj.storeDistribution;
					that.servicePromise = that.obj.servicePromise;
					// that.serviceTime=that.obj.serviceTime
					//服务品类比对
					for (let i = 0; i < that.option.length; i++) {
						if (that.option[i] == that.obj.serviceCategory) {
							that.op_value = i;
						}
					}
					//服务细分比对
					for (let i = 0; i < that.option1.length; i++) {
						if (that.option1[i] == that.obj.serviceSubdivide) {
							that.op_value1 = i;
						}
					}
					//服务包含

					for (let i = 0; i < that.array.length; i++) {
						if (that.array[i] == that.obj.serviceInner) {
							that.op_value = i;
						}
					}
					//服务时间比对
					for (let i = 0; i < that.array2.length; i++) {
						if (that.array2[i] == that.obj.serviceTime) {
							that.index2 = i;
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		//上架销售
		onPrevious() {
			let that = this;
			let obj = {
				id: this.id,
				userId: this.userId,
				shopId: this.shopId,
				serviceCategory: this.option[this.op_value],
				serviceSubdivide: this.option1[this.op_value1],
				serviceInner: this.array[this.index],
				serviceName: this.serviceName,
				serviceIcon: '图片没有',
				storePrice: this.StorePrice,
				storeAboutPrice: this.ReservationPrice,
				storeVipPrice: this.vipPrice,
				storeDistribution: this.storeDistribution,
				storeDistributionPrice: this.storeDistributionPrice,
				serviceDetails: this.serviceDetails,
				serviceNote: this.serviceNote,
				serviceMode: this.index1,
				serviceTime: this.array2[this.index2],
				servicePromise: this.servicePromise
			};
			console.log(obj);
			uni.showModal({
				title:"上架服务",
				content:'确定要上架这个服务吗?',
				success(res) {
					  if (res.confirm) {
					          onSale(obj).then(ress=>{
					          	// console.log(res)
					          	
					          		uni.navigateTo({
					          			url: '/pages/service/service',
					          			fail(err) {
					          				console.log(err)
					          			}
					          		});
					          	
					          	
					          }).catch(err=>{
					          	console.log(err)
					          })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					
				}
				
			})
			
		},
		//上架仓库
		onNext(){
			let that = this;
			let obj = {
				id: this.id,
				userId: this.userId,
				shopId: this.shopId,
				serviceCategory: this.option[this.op_value],
				serviceSubdivide: this.option1[this.op_value1],
				serviceInner: this.array[this.index],
				serviceName: this.serviceName,
				serviceIcon: '图片没有',
				storePrice: this.StorePrice,
				storeAboutPrice: this.ReservationPrice,
				storeVipPrice: this.vipPrice,
				storeDistribution: this.storeDistribution,
				storeDistributionPrice: this.storeDistributionPrice,
				serviceDetails: this.serviceDetails,
				serviceNote: this.serviceNote,
				serviceMode: this.index1,
				serviceTime: this.array2[this.index2],
				servicePromise: this.servicePromise
			};
			uni.showModal({
				title:"仓库服务",
				content:'确定放入仓库吗?',
				success(res) {
					  if (res.confirm) {
					          addWarehouse(obj).then(ress=>{
					          	// console.log(res)
					          	
					          		uni.navigateTo({
					          			url: '/pages/service/service',
					          			fail(err) {
					          				console.log(err)
					          			}
					          		});
					          	
					          	
					          }).catch(err=>{
					          	console.log(err)
					          })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					
				}
				
			})
		}
	},

	onLoad(option) {
		console.log(option.id);
		this.id = option.id;
	},
	created() {
		let that = this;

		this.$nextTick(function() {
			const token = uni.getStorageSync('token');
			that.header.token = token
			
			console.log(that.id);
			if (that.id) {
				that.getEideInfor(that.id);
			}
			
		
		});
	}
};
</script>

<style scoped>
@import './index.css';
u-upload {
	width: 100rpx;
	height: 100rpx;
}
</style>
<style scoped lang="less">
.input_infor {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #989898;
}
.boxs {
	padding: 25rpx 25rpx 0 25rpx;
	.Distribution_Service {
		display: flex;
		padding-bottom: 25rpx;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px solid #e2e2e2;
		.name {
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
		}
	}
}
//服务品类
.boxsClass {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0 25rpx 0;
	border-bottom: 1px solid #e2e2e2;
	.name {
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #000000;
	}
	.text {
		text-align: center;
		flex: 2;
	}
}
</style>
